Vue.component('todo-footer', {
    template: `

    <!-- This footer should hidden by default and shown when there are todos -->
    <footer class="footer" v-show="isFooterShow">
        <span class="todo-count"><strong>{{ pList.length || 0 }}</strong> item left</span>
        <!-- Hidden if no completed items are left ↓ -->
        <button class="clear-completed" @click="clearCompeleteItems" v-show="isClearCompleteShow">Clear completed</button>
    </footer>    

    `,
    props: ['pList'],
    methods: {
        // 清除所有已经完成的
        clearCompeleteItems() {
            this.$emit('p-delete-finished-items');
        }
    },
    computed: {
        // 判断底部是否显示
        isFooterShow() {
            return !this.pList.length == 0;
        },
        // 判断clearComplete按钮是否显示
        isClearCompleteShow() {
            return this.pList.find(item => item.done == true);
        }
    }
});